<template>
  <div class="header">
    <div>
      <button @click="menuCollapse">
        <el-icon v-if="!asideStore.isCollapse"><Fold /></el-icon>
        <el-icon v-if="asideStore.isCollapse"><Expand /></el-icon>
      </button>
    </div>
    <div>
      <span class="banben">盒马生鲜后台 v1.0.0</span>
      <el-icon class="icon"><ChatSquare /></el-icon>
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-avatar
            src="https://img2.baidu.com/it/u=3860777160,2020850966&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=405"
          />
          <span class="admin">admin</span>
          <el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="tuichu()">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { useAsideStore } from "@/stores/aside.js";
import { removeCookie } from "../Cookies";
import { useRouter } from "vue-router";
import { promptBialogbox } from "../Tihsi/tishi";

const router = useRouter();

const asideStore = useAsideStore();

function tuichu() {
  router.push("/");
  promptBialogbox("退出成功");
  removeCookie();
}

// 左边菜单是否伸缩
function menuCollapse() {
  asideStore.isCollapse = !asideStore.isCollapse;
}
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 14px;
  padding-right: 20px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  // background-color: rgb(255,166,106);
  background: linear-gradient(to right, white, rgb(29, 164, 219));
}
.admin {
  font-size: 20px;
  margin-top: 4px;
  margin-left: 10px;
  color: #fff;
}
.el-icon--right {
  color: #fff;
  padding-top: px;
}
.el-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.banben {
  font-size: 15px;
  color: #fff;
}
.icon {
  font-size: 20px;
  margin: 0 20px;
  margin-top: 9px;
  color: #fff;
}
button {
  background-color: white;
  border-style: none;
  .el-icon {
    font-size: 18px;
    color: #000;
  }
}
</style>
